var React = require('react');
var ReactDOM = require('react-dom');
var $ = require('jquery');

require('./about.css') 
 
var About = React.createClass({
	// 初始化
	getInitialState : function() {
		return { data : {} };
	},
	// 在挂载DOM之前请求数据
	componentWillMount : function() {
		// 通过 async:false 来设置服务端渲染
		var about = $.ajax({ async:false, url:'/api/about.json', key:'about' });
		$.when(about).done(function(d1){
			this.setState({ data : d1[0] });
		}.bind(this));
	},
	handleClick: function(e) {
		alert($(e.target).text());
	},
	// 渲染组件 
	render : function() {
		var data = this.state.data;
		return (
			<div>
				<h1>About us</h1>
				<ul className='list-item'>
					<li onClick={this.handleClick}>全称: { data.fullname }</li>
					<li onClick={this.handleClick}>简称: { data.shortname }</li>
					<li onClick={this.handleClick}>地址: { data.address }</li>
					<li onClick={this.handleClick}>电话: { data.phone }</li>
				</ul>
			</div>
		);
	}
	
});

ReactDOM.render(<About />, document.getElementById('container'));